<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS事件捕获1</title>
    <link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <script src="../js/vue.js"></script>
    <script>
        window.onload = function () {
            console.log("1");
        }
        window.onload = function () {
            console.log("2");
        }
        /*  这个注册方式，最大的缺点是会覆盖之前的注册事件。
         上述的例子，最终只会输出 2 。
         然后取消事件，可以通过：
         window.onload = null;*/
    </script>
</head>
<body>
<div id="container">
    <div id="template">
        <button class="btn btn-success" type="button" name="button" onclick="alert(1)">确定</button>
        <!--  属性为on+事件名称，属性值为JavaScript字符串。
  这种方式虽然没有什么兼容性的问题，
  但是不满足结构与行为分离的思想。
  而且当你事件处理比较复杂时，不利于书写与阅读。-->
    </div>
</div>
</body>
<script>
    /*  IE8以及之前的版本不支持。
     addEventListener(eventType, func, flag)
     第一个参数为事件名称，不需要加上on.
     第二个参数为事件执行的方法。
     第三个参数为false时，表示在冒泡阶段执行。为true时，表示在捕获阶段执行。99%的情况多是false。*/

    /*日了狗粮，谷歌浏览器说 addEventListener 不是函数*/
    var btn = document.getElementsByName('button');
    btn.addEventListener('click', function (e) {
        console.log('1');
    }, false);
    btn.addEventListener('click', function (e) {
        console.log('2');
    }, false)
    /*这样注册事件，1和2都会被输出*/

    /*    比如说上述例子中的message函数中就带有e这个参数
     但是IE与标准浏览器的写法却相差甚远。*/
    function message(e) {
        var event = e || window.event,//IE中事件对象是全局对象的属性
            target = e.target || e.srcElement;//IE中的兼容写法
    }
</script>
</html>